<!--菜单8:
能耗预警模块-->
<template>
    <div class="EnergyWarning">
        <el-tabs v-model="activeName" @tab-click="onTabClick" type="border-card">
            <el-tab-pane label="月份能耗预警" name="MonthWarn" class="el-tab-pane"></el-tab-pane>
            <el-tab-pane label="日期能耗预警" name="DayWarn" class="el-tab-pane"></el-tab-pane>
            <router-view />
        </el-tabs>
<!--        <el-tabs v-model="activeName"  type="border-card"  >-->
<!--            <el-tab-pane label="月份能耗预警" name="MonthWarn"><MonthWarn></MonthWarn></el-tab-pane>-->
<!--            <el-tab-pane label="日期能耗预警" name="DayWarn"><DayWarn></DayWarn></el-tab-pane>-->
<!--        </el-tabs>-->
    </div>
</template>

<script>
    export default {
        name: "EnergyWarning",
        data(){
            return{
                activeName:'MonthWarn'
            }
        },
        methods: {
            onTabClick(e) {
                this.$router.push({name: e.name});
            }
        }
    }
</script>

<style>
.EnergyWarning{
    flex: 1;
    display: flex;
    width: 100%;
}

.el-tabs{
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.el-tab-pane {
    height: 0;
    width: 0;
}

.el-tabs__content {
    display: flex;
    flex: 1;
    flex-direction: column;
}
</style>
